<template>
	<view class="user-info">
		<!-- <image src="../../static/images/me/bg.png" mode="widthFix" class="width100 bg_img"></image> -->
		<view class="pore">
			<view>
				<u-navbar title="个人资料" bgColor="transparent" :fixed="false" autoBack>
				</u-navbar>
			</view>
			<u-gap height="10"></u-gap>
			<view class="avatar flex-au wx">
				<button open-type="chooseAvatar" @chooseavatar="getAvatar">
					<view class="pore avatar">
						<image
							:src="userInfo.userAvatar?(api_host+userInfo.userAvatar) : ''"
							mode=""></image>
						<view class="upload flex-au">
							<!-- <image src="../../../static/images/me/upload.png" mode=""></image> -->
						</view>
					</view>
				</button>
			</view>
			<view class="m30 bgFff radius30 p30">
				<view class="flex-jus" @click="show_action = true">
					<view class="">
						<text class="c343 f28 bold">昵称</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20"
							:class="userInfo.userName?'c343':'c999'">{{userInfo.userName || '请输入昵称'}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="">
					<view class="">
						<text class="c343 f28 bold">手机</text>
					</view>
					<view class="flex ml30">
						<text class="f26 mr20"
							:class="userInfo.userPhone?'c343':'c999'">{{userInfo.userPhone || '请输入手机号'}}</text>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="openUrl('/subpage/news/detail?code=7')">
					<view class="">
						<text class="c343 f28 bold">用户协议</text>
					</view>
					<view class="flex ml30">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="openUrl('/subpage/news/detail?code=8')">
					<view class="">
						<text class="c343 f28 bold">支付协议</text>
					</view>
					<view class="flex ml30">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="openUrl('/subpage/news/detail?code=9')">
					<view class="">
						<text class="c343 f28 bold">隐私协议</text>
					</view>
					<view class="flex ml30">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0"></u-line>
				<view class="flex-jus" @click="openUrl('/subpage/news/detail?code=5')">
					<view class="">
						<text class="c343 f28 bold">"东楚畅通"服务协议</text>
					</view>
					<view class="flex ml30">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<u-line color="#ddd" margin="30rpx 0 0 0"></u-line>
			</view>
			<view class="fix-bot textC f24 c666">
				<view class="">黄石市国投数字产业集团有限公司版权所有</view>
				<view class="">v 1.0.0</view>
				<u-gap height="10"></u-gap>
			</view>
		</view>
		<u-modal :show="show_action" title="修改昵称">
			<view class="width100" slot="default">
				<u-input type="nickname" v-model="nick_name" placeholder="请输入昵称" clearable></u-input>
			</view>
			<view class="flex-jus" slot="confirmButton">
				<view class="flex1">
					<view class="mr20">
						<u-button color="#f7f7f7" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
							@click="show_action = false">取消</u-button>
					</view>
				</view>
				<view class="flex1">
					<view class="ml20">
						<u-button color="#FFDE6D" :customStyle="{'color':'#111','height':'80rpx'}" shape="circle"
							@click="submitnickName">确认</u-button>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		updateUserinfo
	} from '@/common/api_user.js'
	export default {
		name: '',
		data() {
			return {
				show_action: false,
				form: {
					avatar: '',
					nick_name: '',
					phone: ''
				},
				nick_name: ''
			}
		},
		onLoad(option) {

		},
		methods: {
			...mapActions(['getUserinfo']),
			async getAvatar(e) {
				const that = this
				let {
					avatarUrl
				} = e.detail;
				const res = await this.$utils.uploadFile(avatarUrl)
				if (res.code == 200) {
					that.form.avatar = res.full_url
					this.updateUserinfo('avatar')
				}
			},
			submitnickName() {
				this.show_action = false
				this.updateUserinfo('nickname')
			},
			async updateUserinfo(type) {
				uni.showLoading()
				let data = {}
				if (type == 'avatar') {
					data = {
						userAvatar: this.form.avatar
					}
				} else {
					data = {
						userName: this.nick_name
					}
				}
				const res = await updateUserinfo(data)
				if (res.code == 200) {
					uni.hideLoading()
					await this.getUserinfo()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FEF4E8;
	}

	.bg_img {
		position: absolute;
		top: 0;
		left: 0;
	}

	.avatar {
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50% 50% 50% 10rpx;
			background-color: #fff;
			border: 4px solid #fff;
		}

		.upload {
			position: absolute;
			bottom: 20rpx;
			right: 0;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background-color: #fff;

			image {
				width: 46rpx;
				height: 46rpx;
			}
		}
	}
</style>